<template>
  <div class="box">
    <headers />
    <navs />
    <car />
    <div class="mask" v-show="isShow">
      <div class="list" v-if="carList.length">
        <p class="top">
          <span>购物车</span>
          <b @click="sitEmpty()">清空</b>
        </p>
        <ul>
          <li v-for="item in carList" :key="item.name">
            <h3>{{ item.name }}</h3>
            <span class="price">￥{{ item.price * item.id }}</span>
            <p>
              <span @click="sitCarListReduce(item)">-</span>
              <b >{{ item.id }}</b>
              <em @click="sitCarListAdd(item)">+</em>
            </p>
          </li>
        </ul>
      </div>
      <div class="kkry" @click="isShows"  v-else>
        空空如也~~~~
      </div>
    </div>
  </div>

</template>

<script>
// 导入 vuex 辅助函数
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import headers from './views/header.vue';
import navs from './views/nav.vue'
import car from './views/car.vue'
export default {
  components: {
    headers,
    navs,
    car
  },
  created() {
      this.getSellerItem(),
      this.getgetGoodsItem(),
      this.getgetRatingsItem()

  },
  methods: {
    ...mapActions(['getSellerItem', 'getgetGoodsItem', 'getgetRatingsItem', 'isShows']),
    ...mapMutations(['sitEmpty','isShows','sitCarListAdd','sitCarListReduce'])

  },
  computed: {
    ...mapState(['seller', 'goods', 'ratings', 'quantity', 'isShow', 'carList']),

  }
}
</script>

<style lang="less"  scoped>
.box {
  position: relative;
  width: 100%;
  height: 100%;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(7 17 27 /.5);
  backdrop-filter: blur(1.3333vw);
  overflow: hidden;

  .kkry {
    width: 100%;
    height: 66.6667vw;
    position: absolute;
    background-color: #fff;
    bottom: 14.6667vw;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .list {
    width: 100%;
    height: 66.6667vw;
    position: absolute;
    background-color: #fff;
    bottom: 14.6667vw;
    overflow: auto;


    .top {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 99;
      height: 12vw;
      width: 100%;
      background-color: rgb(231, 231, 231, .9);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 6.6667vw;
      box-sizing: border-box;
      font-size: 3.2vw;
      color: rgb(7 17 27);
      border-bottom: 1px solid rgb(0 0 0 /.2);

      b {
        color: rgb(0 160 220);
      }
    }

    ul {
      width: 100%;
      height: calc(100% - 12vw);
      padding: 0 6.6667vw;

      li {
        display: flex;
        height: 12.8vw;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgb(7 17 27 /.1);

        h3 {
          font-size: 2.6667vw;
          color: rgb(7, 17, 27);
          font-weight: 700;
          flex: 1;
        }

        .price {
          font-size: 3.7333vw;
          color: red;
          font-weight: 900;
          margin-right: 3.2vw;
        }

        p {
          width: 16vw;
          height: 5.3333vw;
          display: flex;
          justify-content: flex-end;

          span,
          em {
            width: 5.3333vw;
            height: 5.3333vw;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border: .6667vw solid skyblue;
            border-radius: 50%;
            font-weight: 700;
            font-size: 4vw;
            line-height: 5.3333vw;
          }

          span {
            background-color: #fff;
            color: skyblue;
          }

          em {
            background-color: skyblue;
            color: #fff;
          }

          b {
            flex: 1;
            text-align: center;
            line-height: 5.3333vw;
            color: rgb(147 153 159);
          }
        }
      }
    }

  }
}
</style>